<template>
  <div class="my-order-operation">

    <operation-title
      title="我的订单"
      :icon="TitleIcon"
    />

    <div class="divider" />
    <div class="func">
      <p class="attr">
        按钮类型
      </p>
      <div class="adjust-item">
        <el-radio-group v-model="pageConfig.buttonType">
          <el-radio label="picture">
            图片
          </el-radio>
          <el-radio label="icon">
            图标
          </el-radio>
        </el-radio-group>
      </div>
    </div>

    <div class="divider" />
    <div class="func">
      <p class="attr">
        列表项
      </p>
      <template
        v-for="(item, entranceIndex) in pageConfig.entrances"
        :key="entranceIndex"
      >
        <div class="add-item">
          <div class="title-line">
            <div class="title-block">
              {{ item.title }}
            </div>
            <div class="button-block">
              <el-switch
                v-model="item.enable"
                inline-prompt
                active-text="开启"
                inactive-text="关闭"
              />
            </div>
          </div>
          <div
            v-if="pageConfig.buttonType === 'picture'"
            class="add-item-input"
          >
            <p>图片</p>
            <div class="img-placeholder">
              <Upload
                :model-value="item.img"
                file-path="actapp/"
                list-type="picture-card"
                :limit="1"
                @success="(value) => uploadSuccess(value, item, index)"
                @remove="(value) => uploadRemove(value, item, index)"
              >
                <el-button size="small">
                  替换
                </el-button>
              </Upload>
            </div>
          </div>

          <div
            v-else
            class="icon-placeholder"
            @click="showDialog(index)"
          >
            <el-icon v-if="!item.icon">
              <Plus />
            </el-icon>
            <span
              v-else
              class="iconfont operation-iconfont"
              :class="'icon-' + item.icon"
            />
          </div>
        </div>
      </template>
    </div>
    <div class="divider" />

    <div class="func">
      <p class="attr">
        订单列表
      </p>
      <div
        class="link-div"
        @click="linkDialog(pageConfig, 0)"
      >
        <span v-if="pageConfig.url">{{ pageConfig.urlName }}</span>
        <span v-else>请选择链接</span>
      </div>
    </div>

    <div class="divider" />
    <div class="func">
      <p class="attr">
        颜色设置
      </p>
      <div class="adjust-item">
        <span>底部背景</span>
        <el-color-picker v-model="pageConfig.componentBg" />
        <span>{{ pageConfig.componentBg }}</span>
      </div>
      <div class="adjust-item">
        <span>标题背景</span>
        <el-color-picker v-model="pageConfig.titleBg" />
        <span>{{ pageConfig.titleBg }}</span>
      </div>
      <div class="adjust-item">
        <span>内容背景</span>
        <el-color-picker v-model="pageConfig.contentBg" />
        <span>{{ pageConfig.contentBg }}</span>
      </div>
      <div class="adjust-item">
        <span>我的订单</span>
        <el-color-picker v-model="pageConfig.titleColor" />
        <span>{{ pageConfig.titleColor }}</span>
      </div>
      <div class="adjust-item">
        <span>全部订单</span>
        <el-color-picker v-model="pageConfig.allOrderColor" />
        <span>{{ pageConfig.allOrderColor }}</span>
      </div>
      <div class="adjust-item">
        <span>按钮颜色</span>
        <el-color-picker v-model="pageConfig.buttonColor" />
        <span>{{ pageConfig.buttonColor }}</span>
      </div>
    </div>

    <div class="divider" />
    <div class="func">
      <p class="attr">
        边距
      </p>
      <div class="adjust-item">
        <span>上边距</span>
        <el-slider
          v-model="pageConfig.marginTop"
          :min="0"
          :max="50"
          show-input
          size="small"
        />px
      </div>
      <div class="adjust-item">
        <span>下边距</span>
        <el-slider
          v-model="pageConfig.marginBottom"
          :min="0"
          :max="50"
          show-input
          size="small"
        />px
      </div>
      <div class="adjust-item">
        <span>左右边距</span>
        <el-slider
          v-model="pageConfig.marginHorizontal"
          :min="0"
          :max="20"
          show-input
          size="small"
        />px
      </div>
    </div>
    <div class="divider" />
    <div class="func">
      <p class="attr">
        圆角设置
      </p>
      <div class="adjust-item">
        <span>上圆角</span>
        <el-slider
          v-model="pageConfig.radiusTop"
          :min="0"
          :max="20"
          show-input
          size="small"
        />px
      </div>
      <div class="adjust-item">
        <span>下圆角</span>
        <el-slider
          v-model="pageConfig.radiusBottom"
          :min="0"
          :max="20"
          show-input
          size="small"
        />px
      </div>
    </div>

    <icon-selector
      v-model:show="dialogFormVisible"
      @select="(value) => props.pageConfig.entrances[index].icon = value"
    />

    <href-selector
      v-model:show="linkFormVisible"
      :disable-tab="['activity', 'mallProduct', 'middlePage', 'other', 'manual', 'systemManage']"
      :model-value="pageConfig"
      @confirm="(link) => submitUrl(link, pageConfig)"
    />
  </div>
</template>

<script lang="ts" setup>
import type { Ref } from "vue";
import { useHrefSelector } from "@/views/activity/actApp/components/default/compositions/useHrefSelector";
import daifahuo from "@/assets/images/myOrder/daifahuo.png";
import daishouhuo from "@/assets/images/myOrder/daishouhuo.png";
import daifukuan from "@/assets/images/myOrder/daifukuan.png";
import dailingqu from "@/assets/images/myOrder/dailingqu.png";
import tuihuanhuo from "@/assets/images/myOrder/tuihuanhuo.png";
import TitleIcon from "@/assets/app/icon/myOrder.png";
import OperationTitle
  from "@/views/activity/actApp/components/default/operationComponents/operationTitle/OperationTitle.vue";

interface IPageConfig {
  buttonType: "picture" | "icon";
  entrances: {
    img: string;
    useDefaultImg: boolean;
    title: string;
    icon: string;
    enable: boolean;
  }[];
  url: string;
  urlName: string;
  urlType: string;
  linkType: string;
  componentBg: string;
  titleBg: string;
  contentBg: string;
  titleColor: string;
  allOrderColor: string;
  buttonColor: string;
  marginTop: number;
  marginBottom: number;
  marginHorizontal: number;
  radiusTop: number;
  radiusBottom: number;
}

const props = withDefaults(
  defineProps<{
    pageConfig: IPageConfig;
  }>(),
  {
    pageConfig: () => ({
      buttonType: "picture",
      entrances: [
        {
          img: daifukuan,
          useDefaultImg: true,
          defaultImgKey: 'daifukuan',
          title: "待付款",
          status: 0,
          icon: "daifukuan",
          enable: true,
        },
        {
          img: daifukuan,
          useDefaultImg: true,
          defaultImgKey: 'daifukuan',
          title: "待审核",
          status: 11,
          icon: "daishenhe",
          enable: false,
        },

        {
          img: dailingqu,
          useDefaultImg: true,
          defaultImgKey: 'dailingqu',
          title: "待提货",
          status: 2,
          icon: "dailingqu",
          enable: true,
        },
        {
          img: daifahuo,
          useDefaultImg: true,
          defaultImgKey: 'daifahuo',
          title: "待发货",
          status: 3,
          icon: "daifahuo",
          enable: true,
        },
        {
          img: daishouhuo,
          useDefaultImg: true,
          defaultImgKey: 'daishouhuo',
          title: "待收货",
          status: 4,
          icon: "daishouhuo",
          enable: true,
        },
        {
          img: tuihuanhuo,
          useDefaultImg: true,
          defaultImgKey: 'tuihuanhuo',
          title: "售后服务",
          status: -2,
          icon: "tuihuanhuo",
          enable: true,
        },
      ],
      urlType: "mallPage",
      linkType: "",
      url: "",
      urlName: "",
      componentBg: "#FFFFFF",
      titleBg: "#FFFFFF",
      contentBg: "#FFFFFF",
      titleColor: "#333333",
      allOrderColor: "#999999",
      buttonColor: "#333333",
      marginTop: 10,
      marginBottom: 10,
      marginHorizontal: 10,
      radiusTop: 4,
      radiusBottom: 4,
    }),
  }
);
const emits = defineEmits(["changeStyle"]);
const {
  linkFormVisible,
  linkIndex,
  linkObject,
  submitUrl,
  linkDialog
} = useHrefSelector();

const fileLists: Ref<string[]> = ref([]);

const uploadSuccess = (value: { url: string }, item: any, index: number) => {
  item.useDefaultImg = false;
  item.img = value.url;
};

const uploadRemove = (value: string, item: any, index: number) => {
  item.img = ""
}

let index = 0;
const dialogFormVisible = ref(false);
const resetForm = () => {
  dialogFormVisible.value = false;
};
const showDialog = (idx: number) => {
  index = idx;
  dialogFormVisible.value = true;
};
const submitForm = (item: string) => {
  props.pageConfig.entrances[index].icon = item;
  dialogFormVisible.value = false;
};

const init = () => {
  let i = 0;
  while (i < props.pageConfig.entrances.length) {
    fileLists.value[i] = "";
    i++;
  }
};

watch(props, () => {
  emits("changeStyle", props.pageConfig);
});

onMounted(() => {
  init();
});

onBeforeUnmount(() => { });
</script>

<style lang="scss" scoped>
@use "../styles/operation";

.add-item {
  width: 100%;
  display: block !important;

  p {
    padding: 10px 0;
  }

  .add-item-input {
    background: #f4f3f7;
    border-radius: 4px;
    padding: 10px 20px 0 10px;
    color: #999;
    //   margin-top: 10px;
    //   margin-bottom: 20px;
    position: relative;
    display: flex;

    p {
      width: 60px;
    }

    :deep(.el-input) {
      font-size: 12px;
      height: 30px;
      width: calc(100% - 60px);
    }

    &.extra-li {
      justify-content: center;
    }

    .link-div {
      width: calc(100% - 80px);
      display: flex;
      align-items: center;
      background: #e8effc;
      border: 0;
      padding-left: 16px;
      cursor: pointer;
      position: relative;

      :deep(.el-icon) {
        margin-right: 10px;
      }

      :deep(.el-input) {
        font-size: 12px;
        height: 30px;
        width: calc(100% - 30px);
      }

      .close-btn {
        position: absolute;
        right: 5px;
      }
    }

    .sure-close {
      position: absolute;
      right: 5px;
      top: 5px;
      cursor: pointer;
    }
  }

  .add-item-input:last-child {
    padding-bottom: 10px;
  }
}

.operation-iconfont {
  font-size: 48px;
}

.title-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}

.img-placeholder {
  .default-img {
    width: 80px;
    height: 80px;
  }

  :deep {
    .el-upload-list__item {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
